let sceneMain = null;
let sceneChartMain = null;

$(document).ready(function () {
    sceneMain = new Sovit3DPaser.SceneMain({
        /**
         * 说明：apiurl用来定义后端接口地址。当部署方式不一样时接口地址的写法不一样。
         * 具体写法：
         * 数维图云端部署：https://admin.sovitjs.com/restapi
         * 私有版部署：http://192.168.0.10:9188
         * 私有版部署时需要写对应部署的服务器的IP及服务端口
         * 注意：Sovit3D目前不支持离线下载文件进行引用，请使用在线引用场景(云端或者私有部署均可)
         */
        apiurl: 'http://192.168.8.15:9188',
        publishType: 1 //1为在线引用组件 
    });
    //初始化图表参数，如果场景中没有加入图表，则不用创建
    sceneChartMain = new SovitChartPaser.SceneMain({
        apiurl: 'http://192.168.8.15:9188',
        publishType: 1 //1为在线引用组件 
    });
    sceneMain.init3d("sovit3d_1", {
        pageId: "3477555630397456390", //图表的ID，发布图表的地方可以找到2607404157748903944
        chartSceneMain: sceneChartMain, //图表解析器对象传入到3D解析器中
        params: {//params是向后端接口或者SQL中定义了参数，进行参数传递，注意key的名称要和编辑器中对接数据时定义的参数名一样

        }
    }, function (reData) {
        console.info(reData)
        showTwoGuanZi(reData)
    });
    sceneChartMain.initChart("sovit3d_1", {
        appType: 'sovit3d',//注意，当Sovit2D中使用了chart，这里使用SovitChart的API时必须加上这个参数
        pageId: "3477555630397456390", //图表的ID，发布图表的地方可以找到2607404157748903944
    }, function (comId, eventType, reData) {
        console.info(comId, eventType, reData)
        $("#reback_event").html("组件ID：" + comId + ";事件类型" + eventType + ";返回数据" + JSON.stringify(reData));
    });
    console.info(sceneMain)
});

function showTwoGuanZi(val) {
    ///2号罐子
    if (val.props["where"] == "g1") {
        $('.filterbg8').show();
        $('.popup8').show();
        $('.popup8').width('3px');
        $('.popup8').animate({ height: '70%' }, 400, function () {
            $('.popup8').animate({ width: '60%' }, 400);
        });
        setTimeout(summaryShow8, 800);

    }
}

$(function () {
    // $('.popupClose8').on('click', function () {

    // });
})

function clickpopupClose8() {
    sceneMain = null;
    sceneChartMain = null;
    $('.popupClose8').css('display', 'none');
    $('.popup8').animate({ width: '3px' }, 400, function () {
        $('.popup8').animate({ height: 0 }, 400);
    });
    setTimeout(summaryHide8, 800);
}

var time1;
var time2;

function summaryShow8() {

    $('.popupClose8').css('display', 'block');
    intiCHartymain()
    getInitDatass();
    setInterval(function () {
        getInitDatass();
    }, 1000);
    getDataBaseInfoguan();


    time2 = setInterval(function () {
        getDataBaseInfoguan();
    }, 1000 * 30);
    getAlarmData()

    // var toggle4 = [1]; //6分屏
    // createGridLayout4(toggle4);
};

function getInitDatass() {
    $.ajax("http://58.33.201.244:8091/dev-device-instance/getDeviceDataInfo", {
        method: 'GET',
        data: {
            id: "PDJCYHCG",
        },
        headers: {
            "Content-type": "application/json",
        },
        success: function (r) {

            if (r.code == 200) {
                //init3Dcharts(r.data.list.records[0].Tag10, r.data.list.records[0].Tag11)
                document.getElementById("filterbg8dcqdid1").innerHTML = r.data.list.records[0].Tag1;
                document.getElementById("filterbg8dcqdid2").innerHTML = r.data.list.records[0].Tag2;
                document.getElementById("filterbg8dcqdid3").innerHTML = r.data.list.records[0].Tag3;

                document.getElementById("switchTag4").innerHTML = r.data.list.records[0].Tag4 == 1 ? "运行中" : "关闭"
                document.getElementById("switchTag6").innerHTML = r.data.list.records[0].Tag6 == 1 ? "运行中" : "关闭"
                document.getElementById("switchTag7").innerHTML = r.data.list.records[0].Tag7 == 1 ? "运行中" : "关闭"
                document.getElementById("switchTag5").innerHTML = r.data.list.records[0].Tag5 == 1 ? "运行中" : "关闭"
                document.getElementById("switchTag8").innerHTML = r.data.list.records[0].Tag8 == 1 ? "运行中" : "关闭"
                document.getElementById("switchTag9").innerHTML = r.data.list.records[0].Tag9 == 1 ? "运行中" : "关闭"

                document.getElementById("xiaofangbaojiid").innerHTML = r.data.list.records[0].Tag13 == 0 ? "正常" : "报警"

                document.getElementById("switchTagkerqitiId").innerHTML = r.data.list.records[0].Tag14 + "m3/h"
                document.getElementById("switchTagwenduId").innerHTML = r.data.list.records[0].Tag26 + "℃"
                document.getElementById("switchTagyeweiId").innerHTML = r.data.list.records[0].Tag16 + "CM"

                document.getElementById("switchTagjiaoyanbianhaoId").innerHTML = r.data.list.records[0].Tag27

                document.getElementById("switchTagchenjishijianId").innerHTML = r.data.list.records[0].Tag28
            }
        },
        error: function (err) {
            console.log(err);
        }
    })
}


function summaryHide8() {
    // clearInterval(time1)
    // clearInterval(time2)
    $('.filterbg8').hide();
    $('.popup8').hide();
    $('.popup8').width(0);
};




function DeviceDatalistfunbaojing() {
    var datap = {
        deviceId: "",
        size: 3,
    }
    $.ajax(baseUrl + ":8091/dev-device-instance/getListDeviceAlarm", {
        method: 'GET',
        data: (datap),
        headers: {
            "content-type": "application/json",
        },
        success: function (result) {

            if (result.code == 200) {
                var list = result.data.list.records
                if ("PDJCYHCG" == list[0].deviceId) {
                    if (list[0].alarmName == "油罐异常报警") {
                        clickTogglecommvidoe(2);
                    }
                    if ("可燃气体报警" == list[0].alarmName) {
                        clickTogglecommvidoe(3);
                    }
                    if ("一号罐液位高度报警" == list[0].alarmName) {
                        clickTogglecommvidoe(4);
                    }
                }

                var html = "<div style='height:40px;color: aqua;display: flex;margin-top:20px;'>" +
                    " <div style='display: block;margin-left:100px;'>报警时间</div><div style='display: block;margin-left:200px;'>报警数据</div><div style='display: block;margin-left:320px;'>报警级别</div></div>";
                html += '<div style="border-bottom: 1px dotted aqua;background-color:aqua;width: 100%;margin-top:10px;margin-bottom:10px"></div>'
                for (let i = 0; i < list.length; i++) {
                    if ("PDJCYHCG" == list[i].deviceId) {

                        html += "<div style='height: 40px;display: flex;line-height:50px;')'>";
                        html += '<img src="./alarm.png" alt="" srcset="" style="width:40px;height: 40px;" id="baojidialog' + i + '">';
                        html += '<div style="color: aqua;margin-left:20px;width:300px;">' + formatTime(list[i].alarmTime) + '</div>';
                        html += '<div style="color: aqua;margin-left: 60px;width:400px;">' + list[i].alarmName + '</div>';
                        html += '<div style="color: aqua;margin-left: 100px;width:200px;">' + fotmatDescription(list[i].description) + '</div>';
                        // html += '<img src="./alarm.png" alt="" srcset="" style="width:40px;height: 40px;float:right;right: 10px;">';


                        html += '</div>';
                        html += '<div style="border-bottom: 1px dotted aqua;background-color:aqua;width: 100%;margin-top:10px;margin-bottom:20px"></div>'

                    }
                }

                document.getElementById("meagrsbaoj1haodialog").innerHTML = (html);

            }
        },
        error: function (err) {
            console.log(err);
        }
    })



}

var timeArr = []
var tag10arr = []
var tag11Arr = []
var tag12arr = []
var tag14arr = []
var tag26arr = []
var tag16arr = []
function getDataBaseInfoguan() {
    $.ajax("http://192.168.15.10:8080/system/tank/getCurrentDataInfo", {
        method: 'GET',
        headers: {
            "content-type": "application/json",
        },
        success: function (result) {
            var id = []
            timeArr = []
            tag10arr = []
            tag11Arr = []
            tag12arr = []
            tag14arr = []
            tag16arr = []
            tag26arr = []
            if (result.code == 200) {
                for (let i = 0; i < result.data.length; i++) {

                    //判断在id这个数组中有没有找到id
                    if (id.indexOf(getNowFormatDate(result.data[i].createTime)) == -1) {
                        //把id用push存进id这个数组中
                        id.push(getNowFormatDate(result.data[i].createTime));
                        timeArr.push(getNowFormatDate(result.data[i].createTime))
                        tag10arr.push(result.data[i].tag10)
                        tag11Arr.push(result.data[i].tag11)
                        tag12arr.push(result.data[i].tag12)
                        tag14arr.push(result.data[i].tag14)
                        tag16arr.push(result.data[i].tag16)
                        tag26arr.push(result.data[i].tag26)
                    }
                }



                getDataBaseInfoguanchart1()


            }

        },
        error: function (err) {
            console.log(err);
        }
    })
}

function getDataBaseInfoguanchart1() {
    var chartDom = document.getElementById('inti3Dechratinfo1');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        color: ['aqua', 'red'],
        legend: {
            data: ['1#存储罐液位', '2#存储罐液位'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {},
        xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: timeArr,


            axisLabel: {
                show: true,//是否显示轴线
                textStyle: {
                    color: '#fff' // 设置x轴字体颜色为红色
                },
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }

            },
        },
        yAxis: {
            name: "M", //y轴上方的单位
            type: 'value',
            axisLine: {
                show: true,//是否显示轴线
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }
            },
        },
        series: [
            {
                name: '1#存储罐液位',
                type: 'line',
                // stack: 'Total',
                data: tag10arr
            },
            {
                name: '2#存储罐液位',
                type: 'line',
                // stack: 'Total',
                data: tag11Arr
            },
        ]
    };

    option && myChart.setOption(option);
    getDataBaseInfoguanchart2()

}

function getDataBaseInfoguanchart2() {

    var chartDom = document.getElementById('inti3Dechratinfo2');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        color: ['aqua'],
        legend: {
            data: ['消防水总管压力'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {},
        xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: timeArr,


            axisLabel: {
                show: true,//是否显示轴线
                textStyle: {
                    color: '#fff' // 设置x轴字体颜色为红色
                },
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }

            },
        },
        yAxis: {
            name: "Mpa", //y轴上方的单位
            type: 'value',
            axisLine: {
                show: true,//是否显示轴线
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }
            },
        },
        series: [
            {
                name: '消防水总管压力',
                type: 'line',
                // stack: 'Total',
                data: tag12arr
            },

        ]
    };

    option && myChart.setOption(option);
    getDataBaseInfoguanchart3()
}

function getDataBaseInfoguanchart3() {
    var chartDom = document.getElementById('inti3Dechratinfo3');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        color: ['aqua'],
        legend: {
            data: ['可燃气体'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {},
        xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: timeArr,


            axisLabel: {
                show: true,//是否显示轴线
                textStyle: {
                    color: '#fff' // 设置x轴字体颜色为红色
                },
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }

            },
        },
        yAxis: {
            name: "m3/h", //y轴上方的单位
            type: 'value',
            axisLine: {
                show: true,//是否显示轴线
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }
            },
        },
        series: [
            {
                name: '可燃气体',
                type: 'line',
                // stack: 'Total',
                data: tag14arr
            },

        ]
    };

    option && myChart.setOption(option);
    getDataBaseInfoguanchart4();
}

function getDataBaseInfoguanchart4() {
    var chartDom = document.getElementById('inti3Dechratinfo4');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        color: ['red'],
        legend: {
            data: ['油罐温度'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {},
        xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: timeArr,


            axisLabel: {
                show: true,//是否显示轴线
                textStyle: {
                    color: '#fff' // 设置x轴字体颜色为红色
                },
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }

            },
        },
        yAxis: {
            name: "℃", //y轴上方的单位
            type: 'value',
            axisLine: {
                show: true,//是否显示轴线
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }
            },
        },
        series: [
            {
                name: '油罐温度',
                type: 'line',
                // stack: 'Total',
                data: tag26arr
            },

        ]
    };

    option && myChart.setOption(option);
    getDataBaseInfoguanchart5()
}


function getDataBaseInfoguanchart5() {
    var chartDom = document.getElementById('inti3Dechratinfo5');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        color: ['red'],
        legend: {
            data: ['油罐液位'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {},
        xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: timeArr,


            axisLabel: {
                show: true,//是否显示轴线
                textStyle: {
                    color: '#fff' // 设置x轴字体颜色为红色
                },
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }

            },
        },
        yAxis: {
            name: "M", //y轴上方的单位
            type: 'value',
            axisLine: {
                show: true,//是否显示轴线
                lineStyle: {
                    color: '#fff',//刻度线的颜色
                    width: 2
                }
            },
        },
        series: [
            {
                name: '油罐液位',
                type: 'line',
                // stack: 'Total',
                data: tag16arr
            },

        ]
    };

    option && myChart.setOption(option);
}

function intiCHartymain() {
    sceneMain.init3d("onehaocunyouhguanId2", {
        pageId: "3489184462053310472", //图表的ID，发布图表的地方可以找到2607404157748903944
        chartSceneMain: sceneChartMain, //图表解析器对象传入到3D解析器中
        params: {//params是向后端接口或者SQL中定义了参数，进行参数传递，注意key的名称要和编辑器中对接数据时定义的参数名一样
        }
    }, function (reData) {
        console.info(reData)

    });
    sceneChartMain.initChart("onehaocunyouhguanId2", {
        appType: 'sovit3d',//注意，当Sovit2D中使用了chart，这里使用SovitChart的API时必须加上这个参数
        pageId: "3489184462053310472", //图表的ID，发布图表的地方可以找到2607404157748903944
    }, function (comId, eventType, reData) {
        console.info(comId, eventType, reData)
        $("#reback_event").html("组件ID：" + comId + ";事件类型" + eventType + ";返回数据" + JSON.stringify(reData));
    });
}
// 动态创建视频容器
function createGridLayout4(layout) {
    var container = document.getElementById("dia1haovideolistId");
    // 清空容器
    container.innerHTML = "";
    // 动态创建class
    container.className = "play" + layout.length;
    // 根据布局创建视频元素并添加到容器中
    for (var i = 0; i < layout.length; i++) {
        var video = createVideoElement4(i);
        video.className = "grid-item1";
        container.appendChild(video);
    }
}
// 动态创建video标签
function createVideoElement4(id) {
    var videolive = document.createElement("live-player");
    videolive.id = "videodia3d" + id;
    videolive.videoUrl = "http://58.33.201.244:10801/flv/hls/stream_83.flv"
    videolive.loop = true
    videolive.controls = true
    // video.live = true
    return videolive;
}
